import { IconFontResponse, PenChildProps } from "@/types";
import { Button, ColorPicker, InputNumber, Select, Space } from "antd";
import { FormRowCol } from "@/components/common/FormRowCol.tsx";
import { DeleteOutlined, EditOutlined } from "@ant-design/icons";
import { useEffect, useState } from "react";
import localforage from "localforage";
import { IconSelection } from "@/components/common/IconSelection.tsx";
export function PenIconFont({ penOptions, setPenValue }: PenChildProps) {
  const [open, setOpen] = useState(false);
  const [ltdxData, setLtdxData] = useState<IconFontResponse>({
    css_prefix_text: "",
    description: "",
    font_family: "",
    glyphs: [],
    id: "",
    name: "",
  });
  const [sgccData, setSgccData] = useState<IconFontResponse>({
    css_prefix_text: "",
    description: "",
    font_family: "",
    glyphs: [],
    id: "",
    name: "",
  });
  const [ticonData, setTiconData] = useState<IconFontResponse>({
    css_prefix_text: "",
    description: "",
    font_family: "",
    glyphs: [],
    id: "",
    name: "",
  });
  const [icon, setIcon] = useState({
    className: "",
    icon: "",
  });
  let iconMap = {
    ltdx: ltdxData,
    sgcc: sgccData,
    ticon: ticonData,
  };
  const handleChoose = (
    iconFamily: "ltdx" | "sgcc" | "ticon",
    unicodeString: string,
  ) => {
    setPenValue("iconFamily", iconFamily);
    setPenValue("icon", unicodeString);
    setOpen(false);
    let t = setTimeout(() => {
      renderIcon(iconFamily, unicodeString);
      clearTimeout(t);
    }, 200);
  };
  useEffect(() => {
    localforage.getItem("ltdx").then((value) => {
      if (value != null) {
        setLtdxData(() => value as IconFontResponse);
      }
    });
    localforage.getItem("sgcc").then((value) => {
      if (value != null) {
        setSgccData(() => value as IconFontResponse);
      }
    });
    localforage.getItem("ticon").then((value) => {
      if (value != null) {
        setTiconData(() => value as IconFontResponse);
      }
    });
  }, []);
  const renderIcon = (iconFamily: string, iconName: string) => {
    let unicode = escape(iconName).replace("%u", "").toLowerCase();

    let curIconArr = iconMap[iconFamily as keyof typeof iconMap];

    let dataItem = curIconArr.glyphs.find((item) => {
      return item.unicode == unicode;
    });
    setIcon(() => {
      return {
        className: curIconArr.font_family,
        icon: curIconArr.css_prefix_text + dataItem?.font_class || "",
      };
    });
  };
  useEffect(() => {
    if (penOptions.icon != null && penOptions.iconFamily != undefined) {
      renderIcon(penOptions.iconFamily, penOptions.icon);
    }
  }, [penOptions, ticonData]);
  return (
    <>
      <IconSelection
        open={open}
        onClose={() => setOpen(false)}
        iconMap={iconMap}
        onChoose={handleChoose}
        curKey={penOptions.iconFamily || "ticon"}
      ></IconSelection>
      <Space
        style={{ padding: "10px" }}
        className={"w-full"}
        direction="vertical"
      >
        <FormRowCol label="字体图标">
          {icon.icon != "" && (
            <i
              style={{ fontSize: 16 }}
              className={`icon ${icon.className} ${icon.icon}`}
            ></i>
          )}
          <Button
            size={"small"}
            type={"primary"}
            ghost
            onClick={() => {
              setOpen(true);
            }}
            style={{ marginLeft: 10 }}
            icon={<EditOutlined />}
          ></Button>
          <Button
            size={"small"}
            onClick={() => {
              setIcon(() => ({
                className: "",
                icon: "",
              }));
              setPenValue("icon", undefined);
            }}
            danger
            style={{ marginLeft: 10 }}
            icon={<DeleteOutlined />}
          ></Button>
        </FormRowCol>
        <FormRowCol label="图标大小">
          <InputNumber
            min={0}
            className={"w-full"}
            value={penOptions.iconSize}
            onChange={(value) => setPenValue("iconSize", value)}
          />
        </FormRowCol>
        <FormRowCol label="图标旋转">
          <InputNumber
            className={"w-full"}
            value={penOptions.iconRotate}
            onChange={(value) => setPenValue("iconRotate", value)}
          />
        </FormRowCol>
        <FormRowCol label="图标颜色">
          <ColorPicker
            className={"w-full"}
            value={penOptions.iconColor}
            showText
            allowClear
            onChange={(_, hex) => {
              setPenValue("iconColor", hex);
            }}
          />
        </FormRowCol>
        <FormRowCol label={"对齐方式"}>
          <Select
            className={"w-full"}
            value={penOptions.iconAlign}
            options={[
              { label: "上", value: "top" },
              { label: "下", value: "bottom" },
              { label: "左", value: "left" },
              { label: "右", value: "right" },
              { label: "左上", value: "left-top" },
              { label: "右上", value: "right-top" },
              { label: "左下", value: "left-bottom" },
              { label: "右下", value: "right-bottom" },
              { label: "居中", value: "center" },
            ]}
            onSelect={(value) => {
              setPenValue("iconAlign", value);
            }}
          />
        </FormRowCol>
      </Space>
    </>
  );
}
